<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }
    </style>
</head>
<body>
    <div class="app">

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.5/pixi.min.js"></script>
    <script>
        let TextureCache = PIXI.utils.TextureCache,
                loader = PIXI.loader,
                Sprite = PIXI.Sprite,
                resources = PIXI.loader.resources,
                Application = PIXI.Application;

        let app = new PIXI.Application({width: 512,height: 512})

        console.log(app)
        document.body.appendChild(app.view)

        

        // PIXI.loader
        // .add(["images/cat.png", "images/cat2.png", "images/tileset.png"])
        // .on("progress", loadProgressHandler)
        // .load(setup);

        function loadProgressHandler(loader, resource) {
            console.log("resource", resource.data)
            //Display the file `url` currently being loaded
            console.log("loading: " + resource.url);

            //Display the percentage of files currently loaded
            console.log("progress: " + loader.progress + "%");

            //If you gave your files names as the first argument
            //of the `add` method, you can access them like this
            //console.log("loading: " + resource.name);
        }

        function setup() {

            //Create the cat sprite
            // let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);
            let cat = new PIXI.Sprite(PIXI.utils.TextureCache["images/cat.png"]);
            
            cat.x = 200;
            cat.y = 200;
            //Add the cat to the stage
            app.stage.addChild(cat);

            let texture = PIXI.utils.TextureCache["images/tileset.png"]
            let Rectangle = PIXI.Rectangle;
            console.log(new Rectangle(192, 128, 64, 64))
            let rectangle = new Rectangle(192, 128, 64, 64);

            
            //Tell the texture to use that rectangular section
            texture.frame = rectangle;
            let a = new PIXI.Sprite(texture);
            a.x = 400;
            a.y = 400;
            app.stage.addChild(a);

        }

        loader
        .add("images/treasureHunter.json")
        .load(setupa);

        function setupa() {
            //1. Access the `TextureCache` directly
            let dungeonTexture = TextureCache["dungeon.png"];
            dungeon = new Sprite(dungeonTexture);
            // dungeon.width = window.innerWidth;
            // dungeon.height = window.innerHeight;

            app.stage.addChild(dungeon);

            //2. Access the texture using throuhg the loader's `resources`:
            explorer = new Sprite(
                resources["images/treasureHunter.json"].textures["explorer.png"]
            );
            explorer.x = 68;

            //Center the explorer vertically
            explorer.y = app.stage.height / 2 - explorer.height / 2;
            app.stage.addChild(explorer);

            //3. Create an optional alias called `id` for all the texture atlas
            //frame id textures.
            id = PIXI.loader.resources["images/treasureHunter.json"].textures;

            //Make the treasure box using the alias
            treasure = new Sprite(id["treasure.png"]);
            app.stage.addChild(treasure);

            //Position the treasure next to the right edge of the canvas
            treasure.x = app.stage.width - treasure.width - 48;
            treasure.y = app.stage.height / 2 - treasure.height / 2;
            app.stage.addChild(treasure);

            
            //Make the exit door
            door = new Sprite(id["door.png"]);
            door.position.set(32, 0);
            app.stage.addChild(door);

            //Make the blobs
            let numberOfBlobs = 6,
                spacing = 48,
                xOffset = 150;

            //Make as many blobs as there are `numberOfBlobs`
            for (let i = 0; i < numberOfBlobs; i++) {

                //Make a blob
                let blob = new Sprite(id["blob.png"]);

                //Space each blob horizontally according to the `spacing` value.
                //`xOffset` determines the point from the left of the screen
                //at which the first blob should be added.
                let x = spacing * i + xOffset;

                //Give the blob a random y position
                //(`randomInt` is a custom function - see below)
                let y = randomInt(0, app.stage.height - blob.height);

                //Set the blob's position
                blob.x = x;
                blob.y = y;

                //Add the blob sprite to the stage
                app.stage.addChild(blob);
            }
        }
        
        //The `randomInt` helper function
        function randomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

    </script>
</body>
</html>